import echarts from 'echarts'

const install = function(Vue) {
    Object.defineProperties(Vue.prototype, {
        $chart: {
            get() {
                return {
                    //电池
                    battery: function (id,persent) {
                        this.chart = echarts.init(document.getElementById(id));
                        this.chart.clear();

                       var dataArr = [{
                         // show: false,
                         value: '1'
                       }];
                       
                       var value = dataArr[0].value;
                       var min = value.split('.');
                       // var degrees = 180 - (180 * value / 15); //蓝色刻度尺计算
                       // var degrees = (15 - value) / 2.5 * 30; //蓝色刻度尺计算
                       // 蓝色背景
                       var num = value / 15;
                       console.log(Math.floor(persent*100/20))
                       
                       // function rgbToHex(r, g, b) {
                       //   var hex = ((r << 16) | (g << 8) | b).toString(16);
                       //   return "#" + new Array(Math.abs(hex.length - 7)).join("0") + hex;
                       // }
                       
                       // // hex to rgb
                       // function hexToRgb(hex) {
                       //   var rgb = [];
                       //   for (var i = 1; i < 7; i += 2) {
                       //       rgb.push(parseInt("0x" + hex.slice(i, i + 2)));
                       //   }
                       //   return rgb;
                       // }
                       
                       // // 计算渐变过渡色
                       // function gradient(startColor, endColor, step) {
                       //   // 将 hex 转换为rgb
                       //   var sColor = hexToRgb(startColor),
                       //       eColor = hexToRgb(endColor);
                       
                       //   // 计算R\G\B每一步的差值
                       //   var rStep = (eColor[0] - sColor[0]) / step;
                       //   gStep = (eColor[1] - sColor[1]) / step;
                       //   bStep = (eColor[2] - sColor[2]) / step;
                       
                       //   var gradientColorArr = [];
                       //   for (var i = 0; i < step; i++) {
                       //       // 计算每一步的hex值
                       //       gradientColorArr.push(rgbToHex(parseInt(rStep * i + sColor[0]), parseInt(gStep * i + sColor[1]), parseInt(bStep * i + sColor[2])));
                       //   }
                       //   return gradientColorArr;
                       // }
                       
                       var startColor = '#ff0000';
                       var endColor = '#00ff00';
                       var step = 15;
					   var colorArr = ['#ff0000','#fa8c35','#fff143','#99FF00','#00FF33']
					   
                       // var colorArr = gradient(startColor, endColor, step);
                       var colorSet = [
                       ]
                       if(persent==1){
						   colorSet = [
						     [persent, colorArr[4]]
						   ]
					   }else{
						   colorSet = [
						     [persent, colorArr[Math.floor(persent*5)]]
						   ]
					   }
                       console.log(colorSet)
                       var rich = {
                         gray: {
                             fontSize: 20,
                             color: '#CECED0',
                             padding: 20
                         },
                         white: {
                             fontSize: 36,
                             fontWeight: 500,
                             color: '#ffffff'
                         }
                       }
                       
                       let option = {
                       //   backgroundColor: '#000000',
                         series: [{
                                 name: "白色圈刻度",
                                 type: "gauge",
                                 radius: "135%",
                                 splitNumber: 4,
                                 center: ["50%", "75%"],
                                 startAngle: 180, //刻度起始
                                 endAngle: 0, //刻度结束
                                 z: 4,
                                 axisTick: {
                                     show: false
                                 },
                                 splitLine: {
                                     length: 0, //刻度节点线长度
                                     lineStyle: {
                                         width: 0,
                                         color: 'rgba(14,15,20, 0)'
                                     } //刻度节点线
                                 },
                                 axisLabel: {
                                     show: true,
									 align:'right',
									 verticalAlign:'middle',
									 lineHeight: 40,
                                     color: '#ffffff',
                                     fontSize: 12,
									 formatter: function (value, index) {
									     return value+'%';
									 }
                                 }, //刻度节点文字颜色
                                 pointer: {
                                     show: false
                                 },
                                 axisLine: {
                                     lineStyle: {
                                         opacity: 0
                                     }
                                 },
                                 detail: {
                                     show: false
                                 },
                                 data: [{
                                     value: 0,
                                     name: ""
                                 }]
                             },
                             {
                                 name: '外圈刻度m', //刻度背景
                                 type: 'gauge',
                                 z: 2,
                                 radius: '102%',
                                 splitNumber: 6,
                                 startAngle: 180,
                                 endAngle: 0,
                                 min: 0,
                                 max: 15,
                                 center: ["50%", "75%"], //整体的位置设置
                                 axisLine: { // 坐标轴线
                                     lineStyle: { // 属性lineStyle控制线条样式
                                         color: [
                                             [0.8, '#0000ff'],
                                             [1, '#212D43']
                                         ],
                                         width: 35,
                                         opacity: 0, //刻度背景宽度
                                     }
                                 },
                                 splitLine: {
                                     show: false
                                 },
                                 data: [{
                                     show: false,
                                     value: '80'
                                 }],
                                 axisLabel: {
                                     show: false,
                                     //   distance: 10,
                                     textStyle: {
                                         color: '#0000ff',
                                         fontSize: '25',
                                     },
                                 },
                                 pointer: {
                                     show: false
                                 },
                                 axisTick: {
                                     show: false
                                 },
                                 detail: {
                                     show: 0
                                 }
                             },
                             {
                                 name: '进度条', //刻度背景
                                 type: 'gauge',
                                 z: 3,
                                 radius: '100%',
                                 splitNumber: 6,
                                 startAngle: 180,
                                 endAngle: 0,
                                 min: 0,
                                 max: 15,
                                 center: ["50%", "75%"], //整体的位置设置
                                 axisLine: { // 坐标轴线
                                     lineStyle: { // 属性lineStyle控制线条样式
                                         color: colorSet,
                                         shadowColor: [],
                                         shadowBlur: 18,
                                         width: 18,
                                         opacity: 1, //刻度背景宽度
                                     }
                                 },
                                 splitLine: {
                                     show: false
                                 },
                                 data: [{
                                     show: false,
                                     value: '80'
                                 }],
                                 axisLabel: {
                                     show: false,
                                 },
                                 pointer: {
                                     show: false
                                 },
                                 axisTick: {
                                     show: false,
                                     lineStyle: {
                                         color: '#00B3FE',
                                         width: 3
                                     },
                                     length: 8,
                                     splitNumber: 6,
                                 },
                                 detail: {
                                     formatter: function(params) {
                                         return '{white|' + (persent*100).toFixed(2) + "%" + '}'
                                         // if (min.length > 1) {
                                         //     return '{gray|' + '单兵平均响应时间' + '\n' + '}{white|' + min[0] + "m" + min[1] + "s" + '}'
                                         // } else {
                                         //     return '{gray|' + '单兵平均响应时间' + '\n' + '}{white|' + min[0] + "m" + '}'
                                         // }
                                     },
                                     rich: rich,
                                     offsetCenter: ['0', '-20%'],//百分比位置
                                 },
                             },
                             {
                                 name: '背景色', //刻度背景
                                 type: 'gauge',
                                 z: 2,
                                 radius: '100%',
                                 splitNumber: 6,
                                 startAngle: 180,
                                 endAngle: 0,
                                 min: 0,
                                 max: 15,
                                 center: ["50%", "75%"], //整体的位置设置
                                 axisLine: { // 坐标轴线
                                     lineStyle: { // 属性lineStyle控制线条样式
                                         color: [[1, '#CECED0']],
                                       
                                         
                                         width: 18,
                                         opacity: 1, //刻度背景宽度
                                     }
                                 },
                                 splitLine: {
                                     show: false
                                 },
                                 data: [{
                                     show: false,
                                     value: '80'
                                 }],
                                 axisLabel: {
                                     show: false,
                                 },
                                 pointer: {
                                     show: false
                                 },
                                 axisTick: {
                                     show: false,
                                     lineStyle: {
                                         color: '#00B3FE',
                                         width: 3
                                     },
                                     length: 8,
                                     splitNumber: 6,
                                 },
                                 detail: {
                                     show: 0
                                 }
                             },
                              {
                                  name: '刻度线', //刻度背景
                                  type: 'gauge',
                                  z: 2,
                                  radius: '80%',
                                  splitNumber: 4,
                                  startAngle: 180,
                                  endAngle: 0,
                                  // min: 0,
                                  // max: 15,
                                  center: ["50%", "75%"], //整体的位置设置
                                  axisLine: { // 坐标轴线
                                      lineStyle: { // 属性lineStyle控制线条样式
                                          color: [
                                              [0.8, '#00B3FE'],
                                              [1, '#bed3f0']
                                          ],
                                          width: 35,
                                          opacity: 0, //刻度背景宽度
                                      }
                                  },
                                  data: [{
                                      show: false,
                                      value: '80'
                                  }],
                                  axisLabel: {
                                      show: false
                                  },
                                  pointer: {
                                      show: false
                                  },
                                  axisTick: {
                                      show: false,
                                      lineStyle: {
                                          color: '#bed3f0',
                                          width: 3
                                      },
                                      length: 8,
                                      splitNumber: 6,
                                  },
                                  detail: {
                                      show: 0
                                  },
                                  splitLine: {
                                      length: 16, //刻度节点线长度
                                      lineStyle: {
                                          width: 2,
                                          color: '#bed3f0'
                       
                                      } //刻度节点线
                                  },
                              }
                         ]
                       };
                       let v1 = 1
                       // setInterval(function() {
                       //   if (v1 === 15) {
                       //       v1 = 0
                       //   }
                       //   v1++
                       //   let num = v1 / 15;
                       //   console.log(num)
                       //   let rgba =
                       //       // option.series[2].axisLine.lineStyle.shadowColor[0] = [num,'rgba(1,1,1,0.9)']
                       //       option.series[2].axisLine.lineStyle.shadowColor[0] = 'rgba(' + hexToRgb(colorArr[parseInt(num * 10)]) + ',0.9)'
                       //   option.series[2].axisLine.lineStyle.color[0] = [num, colorArr[parseInt(num * 10)]];
                       //   myChart.setOption(option, true);
                       // }, 500);
						option.series[2].axisLine.lineStyle.shadowColor[0] = 'rgba(255,255,255,0.5)'
						this.chart.setOption(option, true);

                    },
                }
            }
        }
    })
}

export default {
    install
}
